<template>
  <div v-loading="disabled" class="goods-ranking">
    <div class="label">
      <div class="title-top-ranking">
        <div style="font-weight:bold;">销售商品排行</div>
        <el-dropdown @command="changeDate">
          <span class="el-dropdown-link">
            {{ salesSortStr }}
            <i class="el-icon-arrow-down el-icon--right" />
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item :command="0">全部</el-dropdown-item>
            <el-dropdown-item :command="7">近7天</el-dropdown-item>
            <el-dropdown-item :command="30">近30天</el-dropdown-item>
            <el-dropdown-item :command="365">近1年</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <!-- 分类表格数据 -->
      <el-row>
        <!-- 表头 -->
        <el-table class="tabel-top">
          <el-table-column label="排名" width="80px" />
          <el-table-column label="商品图片" min-width="125px" />
          <el-table-column label="商品名称" min-width="257px" />
          <el-table-column label="商品分类" min-width="168px" />
          <el-table-column label="商品规格" />
          <el-table-column label="价格" />
          <el-table-column label="销量（件）" />
          <el-table-column label="销售额" />
        </el-table>
        <!-- 表单 -->
        <el-table
          v-show="tableData.length>0"
          ref="multipleTable"
          size="mini"
          :data="tableData"
          :show-header="false"
          tooltip-effect="dark"
        >
          <el-table-column label="排名" prop="ranking" width="80px" style="display:flex;">
            <!-- rankingwhite  rankingBlue-->
            <template slot-scope="scope">
              <div :class="{'rankingBlue':scope.row.index + ((currentPage-1) * pageSize) === 1 || scope.row.index + ((currentPage-1) * pageSize) ===2 || scope.row.index + ((currentPage-1) * pageSize) ===3}">{{ scope.row.index + ((currentPage-1) * pageSize) }}</div>
            </template>
          </el-table-column>
          <el-table-column label="商品图片" min-width="125px" prop="imageUrl">
            <template slot-scope="scope">
              <img :src="qnPath(scope.row.image[0])" alt>
            </template>
          </el-table-column>
          <el-table-column label="商品名称" min-width="257px" prop="name">
            <template slot-scope="scope">
              <div style="max-width:257px;font-size:14px;">
                <a @click="toDetail(scope.row.mdseId)">
                  <div style="color:#3C4353;font-weight:600;">{{ scope.row.name }}</div>
                </a>
                <div style="color:#838A9D">ID:{{ scope.row.mdseId }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="商品分类" min-width="168px" prop="type">
            <template slot-scope="scope">
              <div>{{ scope.row.typeId }}</div>
            </template>
          </el-table-column>
          <el-table-column label="商品规格" prop="price">
            <template slot-scope="scope">
              <div>{{ scope.row.propertyValueName }}</div>
            </template>
          </el-table-column>
          <el-table-column label="价格" prop="stock">
            <template slot-scope="scope">
              <div v-show="scope.row.amount>=10?true:false">
                <span>{{ scope.row.unitPrice|fixedPrice }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="销量（件）" prop="saled">
            <template slot-scope="scope">
              <div>{{ scope.row.salesNum }}</div>
            </template>
          </el-table-column>
          <el-table-column label="销售额" prop="shelfTime">
            <template slot-scope="scope">
              <div style="min-width:130px;">{{ scope.row.salesUnitPrice|fixedPrice }}</div>
            </template>
          </el-table-column>
        </el-table>
        <div v-show="tableData.length<=0" class="none">
          <div>暂无商品</div>
        </div>
        <!-- 分页 -->
        <div class="pagination">
          <el-pagination
            v-show="tableData.length>0"
            :current-page.sync="currentPage"
            :page-size="pageSize"
            layout="prev, pager, next, sizes, jumper"
            :total="noticeCount"
            :hide-on-single-page="true"
            :page-sizes="[6,10, 20, 50, 100]"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-row>
    </div>
  </div>
</template>

<script>
import { getMdseSalesData } from '@/api/statistics';
import { mapGetters } from 'vuex';
import { getDate, getTime } from '@/utils/date';
export default {
  filters: {
    filterDate: function(value) {
      const date = new Date(value);
      return getDate(date) + ' ' + getTime(date, true);
    },
    filterNumber: function(value) {
      function addZeroPrefix(number) {
        return number < 10 ? `0${number}` : number;
      }
      return addZeroPrefix(value);
    }
  },
  data() {
    return {
      goodsName: '',
      typeChangeSure: '',
      screenFlag: false,
      activeIndex: '00200001',
      multipleSelection: [],
      tableData: [],
      // 近多少天
      salesSortStr: '全部',
      salesSortNum: '',
      // 是否是主打产品
      mainProductFlag: false,
      // 价格区间字符串
      checked: false,
      // 新增标签
      formLabelAlign: [],
      addlabel: false,
      // 分页
      currentPage: 1,
      pageSize: 0,
      noticeCount: 0,
      // 每页多少条
      muchData: 6,
      // 当前页码
      momentPage: 1,
      flag: false,
      disabled: false
    };
  },
  computed: {
    ...mapGetters(['shopInfo'])
  },
  watch: {
    // 监听时间变化
    // "hideForm.groundingTime": function(newValue, oldValue) {
    //   this.hideForm.groundingTime = new Date(newValue).getTime();
    //   this.hideForm.groundingTime === 0
    //     ? (this.hideForm.groundingTime = "")
    //     : (this.hideForm.groundingTime = new Date(newValue).getTime());
    // }
    $route(to, from) {
      // if (to.query.search) {
      //   this.getList(1, this.muchData, "", "", "", "", to.query.search);
      // }
    }
  },
  created() {
    this.getMdseSalesData(1, 6, 7);
  },
  methods: {
    // 获取列表 销售排行
    getMdseSalesData(pageNo = 1, pageSize = 3, day) {
      const shopId = this.shopInfo.id;
      this.disabled = true;
      new Promise((resolve, reject) => {
        getMdseSalesData({ shopId, day, pageNo, pageSize })
          .then(res => {
            this.tableData = res.data.sales;
            for (let i = 0; i < this.tableData.length; i++) {
              this.tableData[i].image = this.tableData[i].image.split(',');
              this.tableData[i].index = i + 1;
            }
            this.noticeCount = res.data.size;
            this.pageSize = pageSize;
            this.currentPage = pageNo;
            this.disabled = false;
            resolve(res);
          })
          .catch(error => {
            reject(error);
          });
      });
    },
    // 近7天
    changeDate(item) {
      let str = '';
      switch (item) {
        case 7:
          str = '近7天';
          break;
        case 30:
          str = '近30天';
          break;
        case 365:
          str = '近1年';
          break;
        default:
          str = '全部';
      }
      this.salesSortStr = str;
      this.salesSortNum = item;
      this.getMdseSalesData(this.currentPage, this.pageSize, this.salesSortNum === '' ? 0 : this.salesSortNum);
    },
    // 每页多少条
    handleSizeChange(val) {
      this.pageSize = val;
      // 价格区间判断
      this.getMdseSalesData(1, this.pageSize, this.salesSortNum === '' ? 0 : this.salesSortNum);
    },
    // 当前页码
    handleCurrentChange(val) {
      this.currentPage = val;
      // 价格区间判断
      this.getMdseSalesData(this.currentPage, this.pageSize, this.salesSortNum === '' ? 0 : this.salesSortNum);
    },
    toDetail(value) {
      //  to="/goods/detail"
      sessionStorage.setItem('goodsDetail', value);
      this.$router.push('/goods/detail');
    }
  }
};
</script>

<style lang="scss" scoped>
.goods-ranking {
  background: #fff;
  margin-top: 20px;
  .title-top-ranking {
    display: flex;
    align-items: center;
    height:60px;
    border-bottom: 1px solid #E9E9E9;
    margin-bottom:20px;
    text-indent: 25px;
    .el-dropdown {
      text-indent: 0;
      margin-left: 32px;
      cursor: pointer;
    }
  }
  //表大头
  .gslt-topnav {
    width: 100%;
    /deep/th,
    tr {
      background-color: red !important;
    }
    .el-menu {
      .el-menu-item {
        height: 70px;
        margin: 0 13px;
        font-size: 16px;
        font-weight: 500;
        line-height: 70px;
        padding: 7px;
        margin-right: 40px;
        margin-left: 34px;
      }
      .add-goods-btn {
        width: 112px;
        height: 36px;
        background: rgba(17, 130, 251, 1);
        border-radius: 3px;
        color: #fff;
        line-height: 36px;
        padding: 0;
        float: right;
        margin: 17px 20px 17px 0;
        padding-left: 17px;
        span {
          display: inline-block;
          width: 70px;
          height: 22px;
          font-size: 14px;
          font-weight: 400;
          line-height: 22px;
          padding-left: 6px;
        }
        /deep/.el-icon-plus:before {
          width: 10px;
          height: 11px;
        }
      }
    }
  }
  //表小头颜色
  /deep/.el-table__header-wrapper th,
  /deep/.el-table__header-wrapper tr {
    background-color: #f6f8f9;
  }
  //表单
  .label {
    background-color: #fff;
    overflow: hidden;
    min-height: calc(100vh - 356px);
    .el-row {
      .el-table {
        margin-left: 20px;
        /deep/.has-gutter {
           th {
            /deep/.cell{
              font-weight: 600;
            }
            &:first-child {
              /deep/.cell {
                display: flex;
                justify-content: center;
                align-items: center;
              }
            }
          }
        }
        /deep/.el-table__row {
          td {
            &:first-child {
              /deep/.cell {
                display: flex;
                justify-content: center;
                align-items: center;
              }
            }
          }
        }
        /deep/.cell {
          padding: 15px 0;
          height: 140px;
          .el-checkbox {
            margin-left: 20px;
            line-height: 126px;
          }
          img {
            width: 110px;
            height: 110px;
          }
          .el-dropdown {
            width: 55px;
            font-size: 14px;
            font-weight: 400;
            color: rgba(17, 130, 251, 1);
            line-height: 22px;
            margin-left: 10px;
            .el-dropdown-link {
              cursor: pointer;
            }
          }
          .font-14-1182FB {
            color: #1182fb;
            font-size: 14px;
            padding: 0 10px 0 0;
            border-right: 1px solid #e9e9e9;
          }
          .main-product-icon {
            line-height: 20px;
          }
        }
      }
      .tabel-top {
        /deep/tr,
        /deep/thead {
          background-color: red;
        }
        /deep/.el-table__body-wrapper {
          display: none;
        }
        /deep/.el-checkbox__inner {
          display: none !important;
        }
        /deep/.cell {
          height: 22px;
          font-size: 14px;
          font-weight: 500;
          color: rgba(60, 67, 83, 1);
          line-height: 22px;
          padding: 0;
        }
      }
    }

    // 取消表头全选框
    .el-table /deep/.disabledCheck .cell .el-checkbox__inner {
      display: none !important;
    }
    .el-table /deep/.disabledCheck .cell::before {
      content: "";
      text-align: center;
      line-height: 37px;
    }
  }
}
.none {
  display: flex;
  justify-content: center;
  width: 100%;
  min-height: 54vh;
  align-items: center;
  background: #fff;
  & > div {
    display: flex;
    align-items: center;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.25);
    &:before {
      content: "";
      display: inline-block;
      height: 24px;
      width: 50px;
      background: url("../../assets/images/icon-cry.png") no-repeat center;
      background-size: 24px 24px;
    }
  }
}
// 排名颜色 蓝色
.rankingBlue {
  background: #4574f1;
  border-radius: 2px;
  color: #fff;
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.rankingwhite {
  background: rgba(0, 0, 0, 0);
  color: #3c4353;
  display: flex;
  justify-content: center;
  align-items: center;
}
//分页
.pagination {
  margin-top: 18px;
  text-align: center;
  margin-bottom: 20px;
}
.main-product-icon {
  width: 77px;
  height: 20px;
  background: rgba(230, 247, 255, 1);
  border-radius: 11px;
  text-align: center;
  color: #1182fb;
}
.stock-less-icon {
  display: inline-block;
  width: 66px;
  height: 20px;
  text-align: center;
  position: relative;
  top: 5px;
  div {
    background: rgba(247, 87, 87, 1);
    border-radius: 10px;
    opacity: 0.1;
    position: absolute;
    width: 100%;
    height: 100%;
  }
  span {
    display: inline-block;
    width: 100%;
    line-height: 20px;
    color: #e9433a;
    position: absolute;
    z-index: 1;
    left: 0;
    opacity: 0.8;
  }
}
</style>
